<template>
    <div class="bgColorF">
        <el-container :style="{ height: pcHeight }">
            <el-aside :width="leftAsideWidth">
                <div class="flex-center h36 fs15 color_wt bold" v-if="!isCollapse">后台管理系统</div>
                <div class="flex-center h36 color_wt bold" v-else>后台</div>
                <!-- <el-divider class="pd0 mg0" border-style="dashed" /> -->
                <div :style="{ height: pcHeight2 }">
                    <el-menu
                        :default-active="wtDefaultMenuActive"
                        :default-openeds="['sysConfig']"
                        class="el-menu-vertical-demo textL mg0 pd0"
                        :unique-opened="false"
                        :collapse="isCollapse"
                        :router="true"
                        v-loading="menuLoading"
                    >
                        <el-sub-menu
                            :index="item.value + ''"
                            :route="item.menu_url"
                            v-for="item in leftMenuList"
                            :key="item.value"
                        >
                            <template #title>
                                <el-icon v-if="item.menu_icon">
                                    <component :is="item.menu_icon" class="w20 pdR5" />
                                </el-icon>
                                <span>{{ item.label }}</span>
                            </template>
                            <el-menu-item-group v-for="item2 in item.children" :key="item2.value">
                                <el-sub-menu
                                    :index="item2.value + ''"
                                    :route="item2.menu_url"
                                    v-if="item2.children.length > 0"
                                >
                                    <template #title>
                                        <el-icon v-if="item2.menu_icon">
                                            <component :is="item2.menu_icon" class="w20 pdR5" />
                                        </el-icon>
                                        <span>{{ item2.label }}</span>
                                    </template>
                                    <el-menu-item-group v-for="item3 in item2.children" :key="item3.value">
                                        <el-menu-item
                                            :index="item3.value + ''"
                                            :route="item3.menu_url"
                                            @click="checkMenuUrl(item3)"
                                            v-if="item3.menu_type == 2"
                                        >
                                            <el-icon v-if="item3.menu_icon">
                                                <component :is="item3.menu_icon" class="w20 pdR5" />
                                            </el-icon>
                                            <span>{{ item3.label }}</span>
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <el-menu-item
                                    :index="item2.value + ''"
                                    :route="item2.menu_url"
                                    @click="checkMenuUrl(item2)"
                                    v-else-if="item2.menu_type == 2"
                                >
                                    <el-icon v-if="item2.menu_icon">
                                        <component :is="item2.menu_icon" class="w20 pdR5" />
                                    </el-icon>
                                    <span>{{ item2.label }}</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header height="36px" class="lh36 pd0 mg0">
                    <el-row>
                        <el-col :span="12" class="flex-left-center">
                            <label class="inline-block color6">导航：</label>
                            <!-- <span class="flex-left-center pdR10 cursor" @click="checkAsideWidth">
                                <el-icon size="20" v-if="!isCollapse">
                                    <Expand />
                                </el-icon>
                                <el-icon size="20" v-else>
                                    <Fold />
                                </el-icon>
                            </span> -->
                            <el-breadcrumb separator="/" class="inline-block">
                                <el-breadcrumb-item
                                    ><router-link to="/" target="_blank"> 首页 </router-link></el-breadcrumb-item
                                >
                                <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
                                    {{ item.title }}
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <el-col :span="12">
                            <div style="margin-top: -2px" class="flex-right-right pdR10">
                                <el-dropdown split-button size="small" class="cursor color0 mgT8">
                                    <span class="color9">欢迎您：</span>
                                    {{
                                        store.state.gdepUserInfo
                                            ? store.state.gdepUserInfo.short_name
                                                ? store.state.gdepUserInfo.short_name
                                                : store.state.gdepUserInfo.company_name
                                            : ""
                                    }}
                                    <label class="pdL8 pdR8">
                                        {{
                                            store.state.gdepUserInfo
                                                ? store.state.gdepUserInfo.user_name
                                                    ? store.state.gdepUserInfo.user_name
                                                    : store.state.gdepUserInfo.account
                                                : ""
                                        }}
                                    </label>
                                    {{
                                        store.state.gdepUserInfo
                                            ? store.state.gdepUserInfo.role_name
                                                ? "（" + store.state.gdepUserInfo.role_name + "）"
                                                : ""
                                            : ""
                                    }}
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item icon="Unlock" @click="editPasswdFlag = true"
                                                >修改密码</el-dropdown-item
                                            >
                                            <el-dropdown-item icon="SwitchButton" divided @click="btnLogout"
                                                >注销登录</el-dropdown-item
                                            >
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main class="pd0 mg0 radiusTL6 border_f3 bgColorF3">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component :is="Component"></component>
                        </keep-alive>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, onBeforeMount, watch, getCurrentInstance } from "vue";
import store from "@/store";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { setLocal, getLocal, removeLocal } from "@/assets/js/funcs";

const route = useRoute();
const { proxy } = getCurrentInstance() as any;

const pcHeight = ref(document.body.clientHeight - 1 + "px");
const pcHeight2 = ref(document.body.clientHeight - 40 + "px");
const leftAsideWidth = ref("201px");
const isCollapse = ref(false);
const menuLoading = ref(true);
const editPasswdFlag = ref(false);
const wtDefaultMenuActive = ref("");
const breadcrumb: any = ref([]);
let leftMenuList: any = ref([
    {
        value: "sysConfig",
        label: "系统管理",
        menu_icon: "",
        menu_type: 1, //菜单类型:1,有下级菜单,2,功能菜单
        children: [
            { value: "/company/index", label: "企业主页", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/config", label: "企业配置", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/file", label: "文件管理", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/jobList", label: "招聘岗位", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/receivedResume", label: "收到的简历", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/dashboard", label: "数据分析", menu_icon: "", menu_type: 2, children: [] },
            { value: "/company/log", label: "企业日志", menu_icon: "", menu_type: 2, children: [] },
        ],
    },
]);

const checkAsideWidth = () => {
    isCollapse.value = !isCollapse.value;
    if (isCollapse.value) {
        leftAsideWidth.value = "65px";
    } else {
        leftAsideWidth.value = "201px";
    }
};

const checkMenuUrl = (item: any) => {
    if (item.value && item.menu_type === 2) {
        setLocal("wtDefaultMenuActive", item.value);
    }
};

const btnLogout = () => {
    ElMessageBox.confirm("确定要注销登录吗？注销成功后需要重新登录。", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
    })
        .then(() => {
            //判断注销步骤：1，清除store.state用户信息；2，跳转到登录页
            removeLocal("gdepUserInfo");
            removeLocal("wtDefaultMenuActive");
            breadcrumb.value = [];
            wtDefaultMenuActive.value = "";
            ElMessage({
                type: "success",
                message: "注销成功",
            });
            proxy.$func.openPage("/companyLogin");
        })
        .catch(() => {});
};

onBeforeMount(() => {
    console.log("store.state.gdepUserInfo", store.state.gdepUserInfo);
    if (store.state.gdepUserInfo && store.state.gdepUserInfo.account) {
        store.state.gdepUserInfo = getLocal("gdepUserInfo");
    }
});

onMounted(() => {
    if (store.state.gdepUserInfo) {
        if (getLocal("wtDefaultMenuActive")) {
            wtDefaultMenuActive.value = getLocal("wtDefaultMenuActive");
        }
        if (route && route.name && route.name != "index") {
            breadcrumb.value[0] = {};
            breadcrumb.value[0].title = route.meta.title;
            if (!getLocal("wtDefaultMenuActive")) {
                const tmpMyMenu = proxy.$func.queryKey("key_name", route.name, leftMenuList);
                if (tmpMyMenu && tmpMyMenu.value) {
                    wtDefaultMenuActive.value = tmpMyMenu.value;
                    setLocal("wtDefaultMenuActive", tmpMyMenu.value);
                }
            }
        } else {
            // removeLocal("wtDefaultMenuActive");
            breadcrumb.value = [];
            wtDefaultMenuActive.value = "";
        }

        menuLoading.value = false;
    } else {
        proxy.$func.openPage("/companyLogin");
    }
});

onUnmounted(() => {});
</script>

<style scoped>
.el-menu {
    border-right: 0px !important;
}
.el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
    margin-top: -13px;
}
.el-sub-menu__title {
    height: 45px !important;
    line-height: 45px !important;
}
.el-sub-menu .el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
    margin-top: -13px;
}
.el-menu-item.is-active {
    background: #f3f3f3;
    color: #e9a129;
    font-weight: bold;
}
</style>
